Effect Exporter：一款 2D&3D 特效编辑器插件，专为 Cocos Creator 深度定制

随着 Cocos Creator 3.x 版本的发布，Cocos Creator 的 3D 功能更加完善。开发者 Oreo大魔王 着手制作了一款支持 Shader 2D&3D 的特效编辑器插件，现已更新到 v1.0.2，支持 Cocos Creator 3.3。

我对 Effect3D 效果的实现一直很感兴趣，在 Cocos Creator 3.x 版本发布后，我萌生了一个大胆的想法：在  Cocos Creator 编辑器内集成 Effect3D 材质编辑器！于是，就有了 Effect Exporter。

Effect Exporter

• 这是一款为 Cocos Creator 深度定制的 Shader Effect 编辑器插件

• 支持 effect 2D/3D 特效

• 支持 3D 光照

• 支持纹理/法线/折射/反射贴图

• 支持从资源管理器右键一键编辑 material 、effect 文件，可实时保存到 effect 文件并生效预览

• 支持重新编辑已导出的 effect 文件

• 支持 shift + 左键 框选生成 Frame 组合节点重复使用

• 已调通 100+ 节点，可满足大部分 effect 特效需求

• 已打通在线示例，可一键导入并重复编辑

主界面

点击顶部左侧菜单按钮，可以弹出编辑器菜单。编辑器当前支持一键导出 effect 并即时生效预览，并可重复编辑：

点击顶部右侧菜单按钮，打开 在线示例 面板，选择喜欢的示例，点击即可加载：

默认 Effect3D 模板

当第一次编辑某个 effect 文件时，会生成一份默认的节点树结构（如上图），其中包含两大部分：

一是 VertexOutput 控制的 顶点着色器 ：

在顶点着色器中，主要实现了坐标空间的转换。具体原理可以参考 LearnOpengL 坐标系统[1]。

VertexOutput 根据节点树计算出一个 Vector4 裁剪空间坐标作为顶点着色器的结果输出，最终生成 effect 内顶点着色器部分的代码如下：

vec4 vert(void) {
    //WorldPos
    vec4 output1 = cc_matWorld * vec4(a_position, 1.0);
    //WorldPos * ViewProjectionTransform
    vec4 output0 = cc_matViewProj * output1;
    //VertexOutput
    vec4 target_VertPosition = output0;
    return target_VertPosition;
  }

以上需要了解 CocosEffect v3 常用 shader 内置 Uniform[2]。

二是 FragmentOutput 控制的 片元着色器：

在默认模板中提供了一个 Color4 颜色输入变量，并直接作为片元着色器的结果输出，最终生成 effect 内片元着色器部分的代码如下：

vec4 frag(void) {
    //FragmentOutput
    vec4 target_FragColor = u_color;
    return target_FragColor;
}

默认 Effect2D 模板

2D 模板与 3D 模板差异不大，主要是默认在 片元着色器 加了个 TextureBlock 类型的贴图节点 SpriteFrame，方便控制 2D 纹理。

对应到 effect 文件，每个纹理输出都由一张纹理贴图和一个纹理权重控制：

在该默认模板中，片元着色器还有一个 MultiplyBlock 乘法节点，用来混合贴图颜色与 Color4 定义的颜色，生成的 effect 代码如下：

vec4 frag(void) {
    //SpriteFrame 纹理采样
    #if (USE_2D_SPRITE_FRAME)
     // 当启用宏 USE_2D_SPRITE_FRAME 时，采样 cc.Sprite 自身组件上的纹理
        vec4 tempTextureRead = texture(cc_spriteTexture, transformedUV);
    #else
     // 采样 SpriteFrameSampler 定义的输入纹理
        vec4 tempTextureRead = texture(SpriteFrameSampler, transformedUV);
    #endif
    //纹理权重
    vec4 rgba = tempTextureRead.rgba * SpriteFrameWeight;
    //Multiply（乘法结节，这里用来混合颜色）
    vec4 output2 = u_color * rgba;
    //FragmentOutput（最终输出的颜色）
    vec4 target_FragColor = output2;
    return target_FragColor;
}

在 Cocos Creator 中演示效果如下：

注意：在 Cocos Creator 2D 对象（比如 Sprite 对象）下使用自定义材质时，宏 USE_2D_EFFECT 一定要勾选，使 effect 内相关定义生效，否则会报 CCLocal 相关错误：

同时支持 2D/3D 显示

一个特效可以同时支持 2D 或 3D 显示效果，可参考 在线示例 中的 扭曲特效(2D/3D)。

编辑特效

新建 Cube 节点，新建 effect 、material 文件，为 material 指定 effect 后，右键选中刚才新建的 material 或 effect，可看到 编辑 Effect 相关菜单，点击即可打开 Effect Exporter 编辑器。简单修改下默认模板（这里只是简单调整了颜色），点击左上角菜单 导出（.effect） 即可导出到关联的 effect 文件并实时生效预览。

操作演示

注意：插件第一次编辑某个 effect 文件时，会生成一份默认（3D）的节点树结构。该行为与操作左上角菜单弹出面板下的 新建默认Effect3D项目 行为相同。

加载示例

Effect Exporter 提供了完整的在线示例，可以很方便地浏览效果并一健导入：

导入操作演示

示例导入后，点击左上角菜单 导出(.effect) 即可在  Cocos Creator 中看到效果：

导出操作演示

目前示例还在持续添加，部分示例展示：

溶解与定向消失

菲涅尔反射

光照贴图

另外，线上示例均可一键导出到 Cocos Creator 中，以下是部分示例运行效果：

自定义节点

v1.0.2 参考 ShaderToy 特效实现了部分示例，实现细节请参考插件 oreo-shader-effect-exporter\editor\blocks 文件实现。部分示例效果：

火焰效果

水波效果

万花筒效果

导出到 Cocos Creator 中运行效果如下：

资源地址

Effect Exporter 完整文档与在线体验

https://www.exporter.top/

点击【阅读原文】下载 Effect Exporter - Cocos Store

http://store.cocos.com/app/detail/3369

论坛讨论帖

https://forum.cocos.org/t/topic/125728

关于 Effect Exporter 编辑器的实现，我大量参考了 babylon.js、Shader Forge、webglstudio、react-diagrams、ez-shader-editor 等开源项目，感兴趣的小伙伴可以了解一下。更全面的技术实现过程和效果展示、以及插件的更新内容等等，我都会第一时间发布在论坛讨论帖，欢迎大家来论坛一起学习交流！

扩展链接

[1] LearnOpengL 坐标系统

https://learnopengl-cn.readthedocs.io/zh/latest/01%20Getting%20started/08%20Coordinate%20Systems/#_2

[2]常用 shader 内置 Uniform

https://docs.cocos.com/creator/3.3/manual/zh/material-system/builtin-shader-uniforms.html

---

>> 点击查看嘉宾及演讲主题

12月18日下午14:00，Cocos 开发者沙龙「厦门站」将在厦门香格里拉酒店举办。Cocos 引擎、亚马逊云科技、网易易盾、青瓷游戏、风领科技围绕引擎技术与生态、游戏开发与发行等内容，为各位开发者准备了一场干货盛宴。

报名来到现场的小伙伴，还将获得「Cocos 最新定制周边大礼包」，人手一份哦！扫描下方二维码免费报名吧↓

>> 开发者报名通道

往期精彩